
Component({
  properties: {
    title: {
      type: String,
      value: '',
    },
    widths: {
      type: Number,
      value: '',
    },
    heights: {
      type: Number,
      value: '',
    },
    type:{
      type:Number,
      value:1
    },
    show: {
      type: Boolean,
      value: true,
      observer(newValue, oldValue) {
        
        if (newValue) {
          this.show();
        } else {
          this.hide();
        }
      }
    },
  },
  data: {
    maskAnimation: null, // 蒙层动画
    panelAnimation: null, // 面板动画
  },
  methods: {
    handleMaskTap() {
      this.hide();
      this.triggerEvent('hide', {});
    },
    hide() {
      this.handleMaskAnimation(false);
      this.handlePanelAnimation(false);
    },

    show() {
      this.handleMaskAnimation(true);
      this.handlePanelAnimation(true);
    },

    handleMaskAnimation(flag) {
      let animation = this.maskAnimation ? this.maskAnimation : this.maskAnimation = wx.createAnimation();

      if (flag) {
        animation.left(0).step({ duration: 16, delay: 0 });
        animation.opacity(1).step({ duration: 200 });
      } else {
        animation.opacity(0).left(0).step({ duration: 150 });
        animation.left('-100%').step({ duration: 15 });
      }

      this.setData({
        maskAnimation: animation.export()
      });
    },

    handlePanelAnimation(flag) {
      let animation = this.panelAnimation ? this.panelAnimation : this.panelAnimation = wx.createAnimation({
        duration: 150,
        timingFunction: 'ease-out',
        transformOrigin: "50% 50%",
      });

      if (flag) {
        animation.scale(1.02).step({ duration: 150 });
        animation.scale(1).step({ duration: 150 });
      } else {
        animation.scale(1.02).step({ duration: 150 });
        animation.scale(0.95).step({ duration: 150 });
      }

      this.setData({
        panelAnimation: animation.export()
      });
    }
  },


})
